<template>
  <div id="">
    <router-link class="houseDiv" v-if="houseInfo.isOneself"
    :to="{ path: '/landlordHouseDetail', query: { houseId: houseInfo.houseId,lat:houseInfo.lat,lng:houseInfo.lng}}">
    <!-- <img :src="houseInfo.housePic" alt="" class="houseImg"> -->
    <div class="houseImg" :style="{backgroundImage:'url(' + houseInfo.housePic + ')'}">

    </div>
    <div class="houseCon">
      <span class="title">{{houseInfo.title}}</span>
      <p class="houseAddr">
        <img src="@/assets/images/addr@2x.png" alt="" width="10">
        {{houseInfo.address}}
      </p>
      <div class="keywords mt10">
        <span v-for="item in houseInfo.houseTagList" :key="item.key">{{item.tag}}</span>
      </div>
      <span class="title" v-if="houseInfo.rentType==1">&yen;{{(houseInfo.rentMoney/100).toFixed(2)}}元/月</span>
      <span class="title" v-else>&yen;{{(houseInfo.rentDayMoney/100).toFixed(2)}}元/晚</span>
    </div>
    </router-link>
    <router-link class="houseDiv" v-else
    :to="{ path: '/houseDetail', query: { houseId: houseInfo.houseId,lat:houseInfo.lat,lng:houseInfo.lng}}">
    <!-- <img :src="houseInfo.housePic" alt="" class="houseImg"> -->
    <div class="houseImg" :style="{backgroundImage:'url(' + houseInfo.housePic + ')'}">

    </div>
    <div class="houseCon">
      <span class="title">{{houseInfo.title}}</span>
      <p class="houseAddr">
        <img src="@/assets/images/addr@2x.png" alt="" width="10">
        {{houseInfo.address}}
      </p>
      <div class="keywords mt10">
        <span v-for="item in houseInfo.houseTagList" :key="item.key">{{item.tag}}</span>
      </div>
      <span class="title" v-if="houseInfo.rentType==1">&yen;{{(houseInfo.rentMoney/100).toFixed(2)}}元/月</span>
      <span class="title" v-else>&yen;{{(houseInfo.rentDayMoney/100).toFixed(2)}}元/晚</span>
    </div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['houseInfo'],
  data: () => ({
    userInfo:'',
  }),
  mounted() {
    //do something after mounting vue instance
    // console.log(this.houseInfo);
    let userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
    this.userInfo = userInfo;
  }
}
</script>
<style lang="scss" scoped>

.houseDiv{
  @include flex;
  .houseImg{
    border-radius: 4px;
    width: 100px;
    height: 80px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .houseCon{
    margin-left: 10px;
  }
  .title{
    font-size: 16px;
    font-weight: 550;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .houseAddr{
    font-size: 10px;
    margin: 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}
.keywords{
  span{
    margin-right: 6px;
    margin-bottom: 4px;
    display: inline-block;
    background: #eef0f4;
    color: #8996a2;
    border-radius: 4px;
    padding:2px 6px;
    font-size: 10px;
  }
}
</style>
